<template>
  <t-navbar :title="list[value]" :fixed="false" />

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" ref="mainContent" />
    </keep-alive>
  </router-view>
  <!-- <router-view></router-view> -->

  <t-tab-bar v-model="value" theme="tag" :split="false"
    @change="change">
    <t-tab-bar-item v-for="item in Object.keys(list)" :key="item"
      :value="item">
      {{ list[item] }}
    </t-tab-bar-item>
  </t-tab-bar>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RouterView, useRouter, } from 'vue-router'


const router = useRouter()

const value = ref('home')
const list = {
  'home': '首页',
  // 'app': '应用',
  'chat': '评论',
  'user': '我的',
}


const change = (changeValue: string) => {
  router.replace({
    name: changeValue,
  })
}
</script>
